<mat-toolbar [ngClass]="{'expanded': expandToolbar}">
  <mat-toolbar-row *ngIf="workflowSpec">
    <a mat-button (click)="checkSaved()">
      <mat-icon>arrow_back</mat-icon>
      Back
    </a>
    {{workflowSpec.display_name}}
    ({{workflowSpec.id}})
  </mat-toolbar-row>
  <mat-toolbar-row>
    <button #newMenuTrigger="matMenuTrigger" mat-button [matMenuTriggerFor]="newMenu" title="Open diagram">
      <mat-icon>insert_drive_file</mat-icon>
      <mat-icon>arrow_drop_down</mat-icon>
    </button>
    <mat-menu #newMenu="matMenu">
      <button mat-button (click)="newDiagram(fileTypes.BPMN)">
        <mat-icon>{{fileTypes.BPMN | getIconCode}}</mat-icon>
        Create new BPMN diagram
      </button>
      <button mat-button (click)="newDiagram(fileTypes.DMN)">
        <mat-icon>{{fileTypes.DMN | getIconCode}}</mat-icon>
        Create new DMN diagram
      </button>
    </mat-menu>

    <button #importMenuTrigger="matMenuTrigger" mat-button [matMenuTriggerFor]="importMenu" title="Open diagram">
      <mat-icon>folder</mat-icon>
      <mat-icon>arrow_drop_down</mat-icon>
    </button>
    <mat-menu #importMenu="matMenu">
      <button
              mat-menu-item
              [disabled]="bpmnFilesNoSelf.length === 0"
              (click)="openMethod = 'db'"
              [matMenuTriggerFor]="dbMenu"
              title="Open diagram from database">
        <mat-icon>cloud</mat-icon>
        Open related BPMN/DMN File ...
      </button>
      <mat-menu #dbMenu="matMenu">
        <a
          mat-menu-item
          *ngFor="let bf of bpmnFilesNoSelf"
          (click)="checkChangeBPMN(bf)"
          [matTooltip]="getFileMetaTooltipText(bf)"
          matTooltipClass="tooltip-text"
          matTooltipPosition="right"
        >
          {{getFileMetaDisplayString(bf)}}
        </a>
      </mat-menu>

      <button mat-menu-item (click)="fileInput.click()">
        <mat-icon>code</mat-icon>
        Open from XML File
      </button>
    </mat-menu>

    <button mat-button (click)="saveChanges()" [disabled]="!hasChanged()"><mat-icon>save</mat-icon></button>

    <button mat-button (click)="validate()" [disabled]="hasChanged()"><mat-icon>verified_user</mat-icon></button>
    <button mat-button [matMenuTriggerFor]="downloadMenu" title="Download diagram">
      <mat-icon>save_alt</mat-icon>
      <mat-icon>arrow_drop_down</mat-icon>
    </button>
    <mat-menu #downloadMenu="matMenu">
      <button mat-menu-item (click)="diagram.saveSVG()"><mat-icon>{{fileTypes.SVG | getIconCode}}</mat-icon> Download SVG Image</button>
      <button mat-menu-item (click)="diagram.saveXML()"><mat-icon>code</mat-icon> Download XML File</button>
    </mat-menu>

    <button mat-button *ngIf="!hasChanged()" (click)="editFileMeta()">
      <mat-icon>edit</mat-icon>
      {{getFileName()}}
    </button>
  </mat-toolbar-row>
</mat-toolbar>

<div fxLayout="column">
  <div class="diagram-parent">
    <app-diagram #diagram (importDone)="handleImported($event)" [fileName]="getFileName()" [validation_state]="validationState" [validation_data]="validationData" (validationStart)="partially_validate($event)" ></app-diagram>

    <div *ngIf="importError" class="import-error">
      <strong>Failed to render diagram: </strong>
      {{ importError.message }}
    </div>
  </div>
</div>

<input hidden (change)="onFileSelected($event)" #fileInput type="file" id="file" accept=".bpmn,.dmn,.xml,.xlsx,application/xml,text/xml">
